@import "elements";

@border-roundness: 8px;
@icon-padding: 5px;
@icon-size: 60px;
@frame-size: @icon-size + @icon-padding * 4;
@shadow: 0 6px 11px black;

.special() {
	color:#FC3;
}
.dimmed() {
	.opacity(0.35);
}

.ltIE9-show {
	display:none;
}
.ltIE9 {
	.ltIE9-show {
		display:block;
	}
	.ltIE9-hide {
		display:none;
	}
}
.ltIE9-warning {
	text-align:center;
	padding: 100px 20px;

	p {
		margin-top:0.5em;
	}
}

.logo {
	display:block;
	width: 667px;
	height: 257px;
	margin:0 auto;
}

html {overflow-y: scroll;}
body {
	margin:0;
	padding:0;
	color:#eee;
	background:black url(../img/bg.jpg) top center no-repeat;
	font-family: Arial, Helvetica, sans-serif;
	font-size:12px;
	line-height: 1.5em;
}
header {
    position:relative;
	z-index:20;

	.logo {
   		position:absolute;
		left:50%;
		margin-left:-310px;
		margin-top: 100px;
		cursor:pointer;

		.page.animated & {
			.transition(0.3s);
		}
		.page.open & {
			.scale(0.4);
			margin-left: -610px;
			margin-top: -50px;
		}
	}
}
button {
	border:1px solid #FBF287;
	.rounded(5px);
	.box-shadow(@shadow);
	.gradient(#DEBD4C, #C38F1F, #FAED7C);
	font-weight: bold;
	font-size:1.5em;
	line-height: 1em;
	padding:0.5em 0.75em;
	cursor:pointer;
	color:#510;
}
img {
	border:0 none;
}
a {
	color:#Fe9;
}
hr {
	border: 0;
	height: 1px;
	background:#333;
}
h2, h3,
.h2, .h3 {
	line-height: 1.25em;
	font-weight: normal;
	margin:0;
}
h2, .h2 {
	font-size:2em;
}
h3, .h3 {
	font-size: 1.5em;
	margin-bottom: 0.25em;
}

input.h2 {
	display:block;
	border:1px solid black;
	.rounded(5px);
	padding:0.125em 0.25em;
	margin:-0.125em -0.25em;
	background:transparent;
	color:white;
	max-width: 100%;
	.transition(0.3s);
}
ul {
	list-style:none;
	margin:20px 0 0;
	padding:0;
}
li {
	margin:0;
	padding:0;
}

.hide {
	display:none;
}
.page {
    margin:0 auto;
    position:relative;
    width:910px;
}
.intro {
	width: 600px;
	margin: 0 auto;
	position: absolute;
	top:350px;
	left:50%;
	margin-left:-300px;
	.scale(1);

	img {
		float:left;
		cursor:pointer;
	}
	.content {
		float:right;
		text-align: center;
		width: 330px;
		padding-top: 10px;
	}
	button {
		margin-top: 0.75em;
	}

	.page.animated & {
		.transition(0.3s);
	}
	.page.open & {
		opacity:0;
		top:500px;
		.scale(0);
	}
}
.who-made-this {
	 width:830px;
	 margin:950px auto 0;
	 border-top:1px dotted #321;
	 padding:70px 0 20px 0;
	 color:#642;

	 hr {
	 	position:relative;
	 	background: none;
	 	border: 0 none;
	 	border-bottom:1px dotted #321;
	 	margin:110px 0;

	 	&:after {
	 		content:"";
	 		left:50%;
	 		top:-65px;
	 		margin-left:-65px;
	 		position:absolute;
	 		display:block;
	 		width:130px;
	 		height:130px;
	 		background:black url(../img/rings.png) no-repeat center center;
	 	};
	 }
}
.talent-tree {
    width:100%;
    height:510px;
   .user-select(none);
    position:absolute;
	.opacity(0);
	.scale(0);
	z-index:10;

	.page.animated & {
		.transition(0.3s);
	}
	.page.open & {
		.opacity(1);
		.scale(1);
	}

}
.skill {
	width:@frame-size;
	height:@frame-size;
	position:absolute;

	.icon-container {
		position:absolute;
		background:black;
		width:@icon-size;
		height:@icon-size;
		padding:@icon-padding;
		top:@icon-padding;
		left:@icon-padding;
		.rounded(@border-roundness);
		.box-shadow(@shadow);
		overflow:hidden;
	}
	.icon {
		width:100%;
		height:100%;
		background:url(../img/icon-sprite.png) no-repeat top left;
		.dimmed();
		.transition(0.3s);
	}
	.frame {
		position:absolute;
		width:100%;
		height:100%;
		background:url(../img/sprite.png) no-repeat top left;

		&:hover .tool-tip {
			visibility: visible;
			.opacity(1);
			.transition(0.3s 0.3s);
		}
	}
	.hit-area {
		position:absolute;
		width:100%;
		height:100%;
		cursor:pointer;
		z-index:2;
	}

	&.can-add-points {
		.frame {
			background-position: -@frame-size top;
		}
		.skill-dependency {
			.opacity(1);
		}
	}
	&.has-points {
		.icon {
			.opacity(1);
		}
	}
	&.has-max-points {
		.frame {
			background-position: -@frame-size * 2 top;
		}
		.skill-dependency {
			.opacity(1);
		}
	}

	.skill-points {
		position:absolute;
		z-index:1;
		bottom: 5px;
		right: 5px;
		color:white;
		font-size:11px;
		line-height: 1em;
		width:19px;
		text-align:center;

		span.points {}
		span.max-points {}
	}
	.tool-tip {
		visibility: hidden;
		.opacity(0);
		.rounded(@border-roundness);
		background:#000;
		position:absolute;
		z-index:3;
		top:@icon-padding;
		left:@frame-size;
		width:300px;
		padding:10px;
		.box-shadow(@shadow);
		border:1px solid #333;

		.skill-name {}
		.skill-description {}
		.current-rank-description {
			.special();
		}
		.next-rank-description {
			.dimmed();
			.special();
		}
		.talent-summary {
			.special();
		}
		ul.skill-links {
			li {
				a {}
			}
		}
		.help-message {
			color:#c00;
		}
	}
	.skill-dependency {
		position: absolute;
		display:block;
		bottom:73px;
		left:50%;
		.dimmed();
		pointer-events: none;
		background:url(../img/connection-sprite.png) no-repeat top left;
		.transition(0.3s);

		&.active {
		}
	}
}

@import "skills";

.avatar {
	position:absolute;
	width:380px;
	top: 525px;
	left: 50%;
	margin-left: -425px;
	.scale(0);
	.opacity(0);

	.page.animated & {
		.transition(0.3s);
	}
	.page.open & {
		.scale(1);
		.opacity(1);
	}

	.portrait {
		background:url(../img/avatar-frame.png) top left no-repeat;
		position: absolute;
		top: 15px;
		width: 140px;
		height: 140px;
		pointer-events: none;

		img {
			.rounded(5px);
			overflow:hidden;
			margin:10px 16px 16px 16px;
			width:108px;
			height:108px;
		}
	}
	.portrait-controls {
		position: absolute;
		top: 135px;
		width: 140px;
		text-align: center;
		.dimmed();
		.transition(0.3s);

		button {
			padding: 0 12px 3px;
			.border-radius(0, 5px, 5px, 0);
			margin:3px 1px;
		}
	}

	&:hover {
		.portrait-controls {
			.opacity(1);
		}
		input.h2 {
			border:1px solid #444;
			outline-width: 0;
			background:#111;
		}
	}
	.details {
		padding:20px 20px 20px 30px;
		margin-left:120px;
		border:1px solid #fc6;
		.rounded(3px);
		background:black;
		.box-shadow(@shadow);
		min-height: 115px;

		h2 {}
		.level {
			.value {}
		}
		.talent-summary {
			.special();
		}
		ul.stats {
			li {
				.title {}
				.value {}
			}
		}
	}
}
.sign-off {
	position: absolute;
	width: 310px;
	top: 525px;
	left: 50%;
	margin-left: 105px;
	.scale(0);
	.opacity(0);
	padding-bottom:100px;

	.page.animated & {
		.transition(0.3s);
	}
	.page.open & {
		.scale(1);
		.opacity(1);
	}

	.logo-352 {
		display:block;
		float:left;
	}

	ul {
		margin-bottom:20px;
	}
}
.start-helper {
	background: url(../img/red-arrow.png) no-repeat left center;
	padding-left:55px;
	position: absolute;
	top:30px;
	left:530px;
	.opacity(0);

	&.active {
		.opacity(1);
	}
}